<template>
  <el-alert
      v-if="alert.show"
      :title="alert.message"
      :type="alert.type"
      :closable="true"
      @close="closeAlert"
      show-icon
      center
      class="alert-message"
  />
</template>

<script setup>
import { ref } from 'vue'

const alert = ref({
  show: false,
  message: '',
  type: 'success'
})

// 显示提示信息
const showAlert = (message, type = 'success') => {
  alert.value.show = true
  alert.value.message = message
  alert.value.type = type
  
  // 3秒后自动关闭
  setTimeout(() => {
    closeAlert()
  }, 3000)
}

// 关闭提示
const closeAlert = () => {
  alert.value.show = false
}

defineExpose({
  showAlert
})
</script>

<style scoped>
.alert-message {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
}


</style> 